<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	#jd{
		width: 473px;
		height: 180px;
		margin: 30px auto;
		border: 4px solid blue;
		position: relative;
		/*overflow: hidden;*/
	}
	#jd .big{
		width: 1892px;
		height: 180px;
		position: absolute;
		background: red;
	}
	#jd .big img{
		float: left;
	}
	#jd ul{
		position: absolute;
		top: 170px;
		left: 158px;
	}
	#jd ul li{
		width: 36px;
		height: 5px;
		float: left;
		margin-right: 2px;
		background: #999999;
		list-style: none;
	}

</style>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	
$(function(){

	$('#jd ul li').mouseover(function() {
		// 获得鼠标移入的li的序号
		var c = $(this).index();
		// 计算大div的left值
		var left = c*-473;
		// 让大div运动过去
		$('#jd .big').stop().animate({'left':left+'px'}, 500);
		// 让当前移入的li变绿色，其他的变灰
		$(this).css('background', '#7ABD54').siblings('li').css('background', '#999');
	});

})

</script>

</head>

<body>

<div id="jd">
	<div class="big">
		<img src="images/1.jpg" alt="" />
		<img src="images/2.jpg" alt="" />
		<img src="images/3.jpg" alt="" />
		<img src="images/4.jpg" alt="" />
	</div>

	<ul>
		<li style="background:#7ABD54;"></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>


</body>
</html>
